import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.pink),
        home: Scaffold(
          appBar: AppBar(title: Text('列表')),
          body: HomePage(),
        ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 垂直列表
    /*return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[ // 可以放任何Widget组件
        Container(
          padding: EdgeInsets.fromLTRB(0, 30, 0, 30),
          child: Text('我是一个大标题',
            textAlign: TextAlign.center,
            style:TextStyle(
              fontSize: 30,
            ),
          ),
        ),
        ListTile(
          leading: Icon(Icons.access_alarm, color: Colors.red,size: 40,), // 前图标
          trailing: Image.network('http://b.hiphotos.baidu.com/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg'), // 后图标
          title: Text('主标题1'),
          subtitle: Text('二级标题1'),
        ),
        ListTile(
          leading: Image.network('http://b.hiphotos.baidu.com/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg'),
          title: Text('主标题2'),
          subtitle: Text('二级标题2'),
        ),
        ListTile(
          leading: Icon(Icons.watch, color: Colors.green,size: 40,),
          title: Text('主标题3'),
          subtitle: Text('二级标题3'),
        ),
      ],
    );*/
    // 水平列表
    return Container(
      height: 180,
      child: ListView( //ListView垂直或者水平布局里的组件宽度或高度默认100%，所以宽度设置不设置都可以
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 180,
            color: Colors.red,
          ),
          Container(
            width: 180,
            color: Colors.blue,
            child: ListView(
              children: <Widget>[
                Image.network('http://b.hiphotos.baidu.com/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg'),
                Text('哈哈哈')
              ],
            ),
          ),
          Container(
            width: 180,
            color: Colors.green,
          ),
          Container(
            width: 180,
            color: Colors.orange,
          ),
        ],
      ),
    );
  }
}
